<template>
  <div full-screen width="1920" style="overflow: hidden" height="1080">
    <div class="home-con">
      <div class="home-head">
        <div
          class="headTitle"
          @click="pushBack()"
        />
        <div class="headTime">
          <span
            v-for="(item, index) in tabs"
            :key="index"
            class="headPage2"
            :class="[activeTab === index? 'headPage1':'']"
            @click="activeTabClick(index)"
          >{{ item.label }}</span>
          <!--          <span class="headPage2">其他经济指标</span>
          <span class="headPage2">第三产业指标</span>
          <span class="headPage2">一带一路</span>-->
          <p class="headPage3">
            {{ newTime }}
          </p>
        </div>
      </div>

      <div class="home-chat1">
        <p class="home-chat-title">
          <el-select v-model="activeSelect" placeholder="请选择" @change="activeSelectChange">
            <el-option
              v-for="item in tabs[activeTab].options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </p>
        <line-bar-chart ref="saleChart" :chart-data="dayData" />
      </div>
    </div>
  </div>
</template>
<script>
import LineBarChart from './LineBarChart.vue'

export default {
  components: { LineBarChart },
  data() {
    return {
      activeTab: 0,
      activeSelect: 0,
      tabs: [{
        value: 0,
        label: 'GDP',
        options: [
          {
            value: 0,
            label: '全市 GDP',
            data: {
              name: '全市 GDP',
              data: {
                name: ['2023Q3', '2023Q4', '2024Q1', '2024Q2', '2024Q3E'],
                value: [3377,
                  3455,
                  2772,
                  3363
                ],
                lineData: [3159,
                  3405,
                  2914,
                  3435,
                  3296
                ],
                predictedTrend: 'up'
              }
            }
          },
          {
            value: 1,
            label: '农业 GDP',
            data: {
              name: '农业 GDP',
              data: {
                name: ['2023Q3', '2023Q4', '2024Q1', '2024Q2', '2024Q3E'],
                value: [68,
                  179,
                  55,
                  73
                ],
                lineData: [58,
                  125,
                  75,
                  68,
                  66
                ],
                predictedTrend: 'up'
              }
            }
          },
          {
            value: 2,
            label: '工业 GDP',
            data: {
              name: '工业 GDP',
              data: {
                name: ['2023Q3', '2023Q4', '2024Q1', '2024Q2', '2024Q3E'],
                value: [1340,
                  1253,
                  882,
                  1284
                ],
                lineData: [1285,
                  1152,
                  1028,
                  1350,
                  1125

                ],
                predictedTrend: 'up'
              }
            }
          },
          {
            value: 3,
            label: '第三产业 GDP',
            data: {
              name: '第三产业 GDP',
              data: {
                name: ['2023Q3', '2023Q4', '2024Q1', '2024Q2', '2024Q3E'],
                value: [1968,
                  2023,
                  1835,
                  2006
                ],
                lineData: [2231,
                  2001,
                  1762,
                  2154,
                  2076
                ],
                predictedTrend: 'up'
              }
            }
          }
        ]
      }, {
        value: 1,
        label: '其他经济指标',
        name: '固定资产投资',
        options: [
          {
            value: 0,
            label: '固定资产投资',
            data: {
              name: '固定资产投资',
              data: {
                name: ['2023Q3', '2023Q4', '2024Q1', '2024Q2', '2024Q3E'],
                value: [810,
                  889,
                  503,
                  678
                ],
                lineData: [814,
                  875,
                  750,
                  708,
                  684
                ],
                predictedTrend: 'up'
              }
            }
          },
          {
            value: 1,
            label: '社会消费品零售总额',
            name: '社会消费品零售总额',
            data: {
              name: '社会消费品零售总额',
              data: {
                name: ['2023Q3', '2023Q4', '2024Q1', '2024Q2', '2024Q3E'],
                value: [1323,
                  1220,
                  1401,
                  1427

                ],
                lineData: [1277,
                  1176,
                  1362,
                  1351,
                  1329

                ],
                predictedTrend: 'up'
              }
            }
          },
          {
            value: 2,
            label: '工业增加值',
            data: {
              name: '工业增加值',
              data: {
                name: ['202405', '202406', '202407', '202408', '202409E'],
                value: [14.3,
                  15.0,
                  15.0,
                  14.8
                ],
                lineData: [13.5,
                  13.5,
                  14.9,
                  14.5,
                  13.8
                ],
                predictedTrend: 'up'
              }
            }
          },
          {
            value: 3,
            label: '政府收入',
            data: {
              name: '政府收入',
              data: {
                name: ['2023Q3', '2023Q4', '2024Q1', '2024Q2', '2024Q3E'],
                value: [55,
                  72,
                  97,
                  59
                ],
                lineData: [45,
                  68,
                  88,
                  78,
                  52
                ],
                predictedTrend: 'up'
              }
            }
          }
        ]
      }, {
        value: 2,
        label: '服务业活力指数',
        options: [
          {
            value: 0,
            label: '科创及服务指数',
            data: {
              name: '科创及服务指数',
              data: {
                name: ['202405', '202406', '202406', '202407'],
                value: [120,
                  87,
                  119,
                  115
                ],
                lineData: [null, null, null, null],
                predictedTrend: 'up'
              }
            }
          },
          {
            value: 1,
            label: '商业服务活力指数',
            data: {
              name: '商业服务活力指数',
              data: {
                name: ['2023Q3', '2023Q4', '2024Q1', '2024Q2'],
                value: [114,
                  90,
                  102,
                  107
                ],
                lineData: [null, null, null, null],
                predictedTrend: 'up'
              }
            }
          },
          {
            value: 2,
            label: '城际联动活力指数',
            data: {
              name: '城际联动活力指数',
              data: {
                name: ['2023Q3', '2023Q4', '2024Q1', '2024Q2', '2024Q3E'],
                value: [4100, 200, 240, 150],
                lineData: [10, 10, 20, 9, 18],
                predictedTrend: 'up'
              }
            }
          },
          {
            value: 3,
            label: '仓储贸易活力指数',
            data: {
              name: '仓储贸易活力指数',
              data: {
                name: ['2023Q3', '2023Q4', '2024Q1', '2024Q2', '2024Q3E'],
                value: [400, 200, 240, 150],
                lineData: [10, 10, 20, 9, 18],
                predictedTrend: 'up'
              }
            }
          }
        ]
      }, {
        value: 3,
        label: '一带一路',
        options: [
          {
            value: 0,
            label: '一带一路国家的经济风险',
            data: {
              name: '一带一路国家的经济风险',
              data: {
                name: ['2023Q3', '2023Q4', '2024Q1', '2024Q2', '2024Q3E'],
                value: [400, 200, 240, 150],
                lineData: [10, 10, 20, 9, 18],
                predictedTrend: 'up'
              }
            }
          }
        ]
      }],
      value: '',
      newTime: '',
      timer: null,
      dayData: {
        name: '全市 GDP',
        data: {
          name: ['2023Q3', '2023Q4', '2024Q1', '2024Q2', '2024Q3E'],
          value: [3377,
            3455,
            2772,
            3363
          ],
          lineData: [3159,
            3405,
            2914,
            3435,
            3296
          ],
          predictedTrend: 'up'
        }
      }
    }
  },
  mounted() {
    this.getNowTime()
    this.timer = setInterval(() => {
      this.getNowTime()
    }, 1000)
  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
  methods: {
    pushBack() {
      this.$router.push('/')
    },
    activeTabClick(index) {
      this.activeTab = index
      this.activeSelect = 0

      this.dayData = this.tabs[index].options[0].data
    },
    activeSelectChange(e) {
      this.dayData = this.tabs[this.activeTab].options[e].data
    },
    getNowTime() {
      const data = new Date()
      this.newTime = data.getFullYear() + '-' + this.addzero((data.getMonth() + 1)) + '-' + this.addzero(data.getDate()) + '     ' + '' + '' + this.addzero(data.getHours()) + ':' + this.addzero(data.getMinutes()) + ':' + this.addzero(data.getSeconds())
    },
    addzero(s) {
      return s < 10 ? '0' + s : s
    }
  }
}

</script>
<style lang="scss" scoped>
.home-con{
  height: 100%;
  min-width: 1280px;
  min-height: 720px;
  background: url("~@/assets/images/bg.png") no-repeat;
  background-size: 100% 100%;
}
.home-head{
  background: url("~@/assets/images/head.png") no-repeat;
  background-size: 100%;
  height: 110px;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
}
.headTitle{
  height: 50%;
  left: 50%;
  margin-top: 20px;
  margin-left: 40%;
  width: 20%;
  background: url("~@/assets/images/headtitle.png") no-repeat;
  background-size: 100%;
}
.headTitle:hover {
  cursor: pointer;
}
.headPage{
  margin-left: 2%;
  width: 25%;
  display: flex;
  justify-content: space-between;
  background-size: 100%;
}
.headTime{
  width: 98%;
  display: flex;
  justify-content: space-between;
  background-size: 100%;
  span{
    cursor: pointer;
  }
}
.headPage2{
  font-family: HYLingXinJ, sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: #FFFFFF;
  text-align: center;
  width: 160px;
  height: 40px;
  background: url("~@/assets/images/pageblue.png") no-repeat;
  background-size: 100% 100%;
}
.headPage1{
  background: url("~@/assets/images/pageyellow.png") no-repeat;
  background-size: 100% 100%;
}
.headPage3{
  width: 300px;
  float: right;
  font-family: HYLingXinJ, sans-serif;
  font-weight: 400;
  font-size: 18px;
  color: #D3DDE8;
  margin-left: 64%;
  text-align: center;
}

.home-chat1{
  position: absolute;
  left: 0;
  right: 0;
  top: 100px;
  bottom: 0;
  margin: auto;
  width: 80%;
  height: calc(100vh - 200px) !important;
  //background: url("~@/assets/images/boxslider.png") no-repeat;
  //background-size: 100% 100%;
  box-shadow: inset 0px 0px 34px 1px #0099FF;
  background: rgba(7,30,55,0.6);
  border-image: linear-gradient(0deg, #17B8FC, #17B8FC) 1 1;
}
.home-chat-title{
  font-weight: 400;
  font-size: 18px;
  color: #FFFFFF;
  line-height: 40px;
  margin-left: 40px;
  font-family: HYLingXinJ, sans-serif;
  display: flex;
  justify-content: flex-end;
  padding-right: 50px;
  padding-top: 20px;
}
.home-center{
  margin-top: 20px;
  width: 50%;
  height: 90%;
  background: url("~@/assets/images/anhui.png") no-repeat;
  background-size: 95%;
}
::v-deep .el-date-picker ,.el-popper .custom-date-picker-popup {
  background: aliceblue;
}
::v-deep .el-input__inner {
  background-color: transparent !important;
  border-color:#80ffff;
  box-shadow: 1px 1px 5px 1px  RGB(128,255,255,0.8) inset;
  height: 30px;
  font-size: 14px;
  color: #FFFFFF;
}

</style>

